<template>
  <div class="content">
    <lc-table
      v-bind="tableConfig"
      :tableData="tableData"
      :pageNumber="pageNumber"
      v-model:pageInfo="pageInfo"
    >
      <template #handerHandle>
        <el-button type="primary" size="medium" @click="handleNewClick"
          >新建{{ tableConfig.tableTitle }}</el-button
        >
      </template>
      <template #status="{ row }">
        <el-button :type="row.enable ? 'primary' : 'danger'" size="mini">{{
          row.enable ? '启用' : '停用'
        }}</el-button>
      </template>
      <template #createAt="{ row }">
        <span>{{ $filters.formatTime(row.createAt) }}</span>
      </template>
      <template #updateAt="{ row }">
        {{ $filters.formatTime(row.updateAt, 'YYYY-MM-DD') }}
      </template>
      <template #handle="{ row }">
        <el-button type="text" icon="el-icon-delete">删除</el-button>
        <el-button type="text" icon="el-icon-edit" @click="handleEditClick(row)"
          >编辑</el-button
        >
      </template>
      <template
        v-for="item in otherPropSlots"
        :key="item.prop"
        #[item.slotName]="scope"
      >
        <template v-if="item.slotName">
          <slot :name="item.slotName" :row="scope.row"></slot>
        </template>
      </template>
    </lc-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import LcTable from '@/base-ui/table'
import { computed } from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
  components: {
    LcTable
  },
  props: {
    tableConfig: {
      type: Object,
      required: true
    },
    pageName: {
      type: String,
      required: true
    }
  },
  emits: ['newBtnClick', 'editBtnClick'],
  setup(props, { emit }) {
    const pageInfo = ref({
      currentpage: 1,
      pagesize: 10
    })
    watch(pageInfo, () => pageTableList())
    const store = useStore()
    const pageTableList = (queryInfo: any = {}) => {
      store.dispatch('system/getPageList', {
        pathName: props.pageName,
        pageInfo: {
          offset: (pageInfo.value.currentpage - 1) * pageInfo.value.pagesize,
          size: pageInfo.value.pagesize,
          ...queryInfo
        }
      })
    }
    pageTableList()
    // 获取用户列表
    const tableData: any = computed(() =>
      store.getters['system/getList'](props.pageName)
    )
    // 获取分页
    const pageNumber: any = computed(() =>
      store.getters['system/getPageNumber'](props.pageName)
    )
    // 获取其它的动态插槽名称
    const otherPropSlots = props.tableConfig?.propList.filter((item: any) => {
      if (item.slotName === 'createAt') return false
      if (item.slotName === 'updateAt') return false
      if (item.slotName === 'handle') return false
      if (item.slotName === 'status') return false
      return true
    })
    // 新增
    const handleNewClick = () => {
      emit('newBtnClick')
    }
    // 编辑
    const handleEditClick = (row: any) => {
      emit('editBtnClick', row)
    }
    return {
      tableData,
      pageTableList,
      pageInfo,
      pageNumber,
      otherPropSlots,
      handleNewClick,
      handleEditClick
    }
  }
})
</script>

<style scoped lang="less">
.content {
  padding: 20px;
  border-top: 20px solid #f5f5f5;
}
</style>
